<template>
	<view>
		<view class="brand-body" :class="isIphoneX ? 'padding-bottom' : ''">
			<!-- 头部轮播 -->
			<view class="carousel-section" v-if="swiperList.length > 0 && goodsBrandList.length > 0">
				<!-- 背景色区域 -->
				<view class="titleNview-background"></view>
				<swiper class="carousel" circular autoplay="true">
					<swiper-item v-for="(item, index) in swiperList" :key="index" class="carousel-item">
						<image :src="$util.img(item.adv_image)" @click="redirectTo(item.adv_url)" />
					</swiper-item>
				</swiper>
			</view>
			<view class="brand-container" v-if="goodsBrandList.length > 0">
				<navigator :url="'/pages/goods/list/list?brand_id=' + item.brand_id" v-for="(item, index) in goodsBrandList" :key="index" class="brand-item">
					<view class="brand-ad">
						<image :src="item.brand_ads != '' ? $util.img(item.brand_ads) : $util.img('upload/uniapp/brand_default.png')" class="pic" mode="aspectFit"></image>
					</view>
					<view class="brand-info">
						<view class="brand-pic"><image :src="item.brand_pic != '' ? $util.img(item.brand_pic) : $util.img('upload/uniapp/default_goods.png')"></image></view>
						<view class="brand-name ns-font-size-base">{{ item.brand_name }}</view>
						<view class="brand-desc ns-text-color-gray ns-font-size-sm">{{ item.describe }}</view>
					</view>
				</navigator>
			</view>
			<uni-load-more :status="status" :content-text="contentText" v-if="goodsBrandList.length > 0 && pageCount > 1" />
			<!-- 数据为空 -->
			<view v-if="isEmpty && goodsBrandList.length == 0" class="empty">
				<view class="iconfont iconwenzhangchaxun"></view>
				<view class="ns-text-color-gray">Sorry！没有找到您想要的商品…</view>
				<button type="primary" @click="goIndex()">去首页逛逛吧</button>
			</view>
		</view>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			swiperList: [],
			goodsBrandList: [],
			pageIndex: 1,
			pageCount: 0,
			isEmpty: false,
			status: 'loading',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多了'
			},
			ident: false, //防止初始化时，触发上拉加载
			isIphoneX: false //判断手机是否是iphoneX以上
		};
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				if (res.model.search('iPhone X') != -1) {
					this.isIphoneX = true;
				}
			}
		});
		this.getSwiperList();
		this.getGoodsBrandList();
	},
	onReachBottom() {
		if (!this.ident) return;
		this.getGoodsBrandList();
	},
	mixins: [http],
	methods: {
		getSwiperList() {
			this.sendRequest({
				url: 'System.Shop.advDetail',
				data: {
					ap_keyword: 'APPLET_BRAND_SWIPER',
					export_type: 'data'
				},
				success: res => {
					if (res.code == 0) {
						let list = res.data.advs;
						this.swiperList = list;
					}
				}
			});
		},
		redirectTo(link) {
			if (link == null || link == '') return;
			if (link.is_tabbar == 1) {
				this.$util.redirectTo(link.url, {}, 'tabbar');
			} else {
				this.$util.redirectTo(link.url);
			}
		},
		goIndex() {
			this.$util.redirectTo('/pages/index/index/index', {}, 'tabbar');
		},
		getGoodsBrandList() {
			if (this.status == 'nomore') return;
			this.sendRequest({
				url: 'System.Goods.goodsBrandList',
				data: {
					page_index: this.pageIndex,
					condition: JSON.stringify({
						brand_recommend: 1
					}),
					order: 'sort desc'
				},
				success: res => {
					this.ident = true;
					if (res.code == 0) {
						let list = res.data.data;
						this.pageCount = res.data.page_count;

						if (this.pageCount == 0) {
							this.status = 'nomore';
							this.isEmpty = true;
							this.contentText.contentnomore = '';
						} else {
							if (this.pageIndex < this.pageCount) {
								this.status = 'more';
							} else {
								this.status = 'nomore';
								this.contentText.contentnomore = '没有更多了';
							}
							this.isEmpty = false;

							if (list.length > 0) {
								this.goodsBrandList = this.goodsBrandList.concat(list);
								this.pageIndex++;
							}
						}
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}
.padding-bottom {
	padding-bottom: 68rpx !important;
}
/* 头部 轮播图 */
.carousel-section {
	position: relative;
	padding-top: 20rpx;
	margin-bottom: 20rpx;
	.titleNview-placing {
		height: var(--status-bar-height);
		padding-top: 88rpx;
		box-sizing: content-box;
	}

	.titleNview-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 426rpx;
		transition: 0.4s;
	}
}

.carousel {
	width: 100%;
	height: 350rpx;
	.carousel-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
}
.brand-container .brand-item {
	background: #fff;
	border-radius: $ns-border-radius;
	overflow: hidden;
	margin-bottom: 20rpx;
}

.brand-container .brand-ad {
	width: 750rpx;
	height: 230rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	image {
		width: 750rpx;
		height: 230rpx;
	}
}
.brand-container .brand-ad .recommend-icon {
	background: url();
	background-size: contain;
	width: 80rpx;
	height: 80rpx;
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
}

.brand-container .brand-info {
	height: 140rpx;
	padding-left: 160rpx;
	position: relative;
}

.brand-container .brand-info .brand-pic {
	width: 120rpx;
	height: 120rpx;
	position: absolute;
	left: 20rpx;
	top: 0rpx;
	line-height: 120rpx;
}

.brand-container .brand-info .brand-pic image {
	width: 100%;
	height: 100%;
	border-radius: 100%;
}

.brand-container .brand-info .brand-name {
	margin-bottom: 10rpx;
	line-height: 40rpx;
	white-space: nowrap;
	overflow: hidden;
}

.brand-container .brand-info .brand-desc {
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-all;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
</style>
